<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ include file="/WEB-INF/view/common/tag.jsp" %>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="favicon.ico"> <link href="${baseurl}/css/bootstrap.min.css?v=3.3.7" rel="stylesheet">
    <link href="${baseurl}/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${baseurl}/css/plugins/jsTree/style.min.css" rel="stylesheet">
    <link href="${baseurl}/css/animate.css" rel="stylesheet">
    <link href="${baseurl}/css/style.css?v=4.1.0" rel="stylesheet">
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content  animated fadeInRight">
    <input type="hidden" id="aheId">
    <input type="hidden" id="amyId">
    <div class="row">
        <div class="col-sm-12">

            <div class="ibox chat-view">

                <div class="ibox-title">
                    <small class="pull-right text-muted" id="newDate"></small> 聊天窗口
                </div>

                <div class="ibox-content">

                    <div class="row">

                        <div class="col-md-9 ">
                            <div class="chat-discussion" id="chat-discussion">

<%--                                <div class="chat-message">--%>
<%--                                    <img class="message-avatar" src="${baseurl}/images/a1.jpg" alt="">--%>
<%--                                    <div class="message">--%>
<%--                                        <a class="message-author" href="#"> 颜文字君</a>--%>
<%--                                        <span class="message-date"> 2015-02-02 18:39:23 </span>--%>
<%--                                        <span class="message-content">--%>
<%--											H+ 是个好框架--%>
<%--                                            </span>--%>
<%--                                    </div>--%>
<%--                                </div>--%>
<%--                                <div class="chat-message">--%>
<%--                                    <img class="message-avatar" src="${baseurl}/images/a4.jpg" alt="">--%>
<%--                                    <div class="message">--%>
<%--                                        <a class="message-author" href="#"> 林依晨Ariel </a>--%>
<%--                                        <span class="message-date">  2015-02-02 11:12:36 </span>--%>
<%--                                        <span class="message-content">--%>
<%--											jQuery表单验证插件 - 让表单验证变得更容易--%>
<%--                                            </span>--%>
<%--                                    </div>--%>
<%--                                </div>--%>
<%--                                <div class="chat-message">--%>
<%--                                    <img class="message-avatar" src="${baseurl}/images/a2.jpg" alt="">--%>
<%--                                    <div class="message">--%>
<%--                                        <a class="message-author" href="#"> 谨斯里 </a>--%>
<%--                                        <span class="message-date">  2015-02-02 11:12:36 </span>--%>
<%--                                        <span class="message-content">--%>
<%--											验证日期格式(类似30/30/2008的格式,不验证日期准确性只验证格式--%>
<%--                                            </span>--%>
<%--                                    </div>--%>
<%--                                </div>--%>
<%--                                <div class="chat-message">--%>
<%--                                    <img class="message-avatar" src="${baseurl}/images/a5.jpg" alt="">--%>
<%--                                    <div class="message">--%>
<%--                                        <a class="message-author" href="#"> 林依晨Ariel </a>--%>
<%--                                        <span class="message-date">  2015-02-02 - 11:12:36 </span>--%>
<%--                                        <span class="message-content">--%>
<%--											还有约79842492229个Bug需要修复--%>
<%--                                            </span>--%>
<%--                                    </div>--%>
<%--                                </div>--%>
<%--                                <div class="chat-message">--%>
<%--                                    <img class="message-avatar" src="${baseurl}/images/a6.jpg" alt="">--%>
<%--                                    <div class="message">--%>
<%--                                        <a class="message-author" href="#"> 林依晨Ariel </a>--%>
<%--                                        <span class="message-date">  2015-02-02 11:12:36 </span>--%>
<%--                                        <span class="message-content">--%>
<%--											九部令人拍案叫绝的惊悚悬疑剧情佳作】如果你喜欢《迷雾》《致命ID》《电锯惊魂》《孤儿》《恐怖游轮》这些好片，那么接下来推荐的9部同类题材并同样出色的的电影，绝对不可错过哦~--%>
<%--                                        </span>--%>
<%--                                    </div>--%>
<%--                                </div>--%>
                            </div>

                        </div>
                        <div class="col-md-3">
                            <div class="chat-users">

                                <div class="users-list">
                                    <c:forEach items="${robotList}" var="robot">
                                        <div class="chat-user" id="${robot.id}">
                                            <c:choose>
                                                <c:when test="${robot.online == '1'}">
                                                    <span class="pull-right label label-primary">在线</span>
                                                </c:when>
                                            </c:choose>

                                            <img class="chat-avatar" src="${baseurl}/images/a5.jpg" alt="">
                                            <div class="chat-user-name">
                                                <a href="#">${robot.userName}</a>
                                            </div>
                                        </div>
                                    </c:forEach>

                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="chat-message-form">

                                <div class="form-group">
                                    <textarea class="form-control message-input" name="message" id="message" placeholder="输入消息内容"></textarea>
                                </div>
                                <div class="form-group">
                                    <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="add">发送</button>

                                </div>
                            </div>
                        </div>
                    </div>


                </div>

            </div>
        </div>

    </div>


</div>


<!-- 全局js -->
<script src="${baseurl}/js/jquery.min.js"></script>
<script src="${baseurl}/js/bootstrap.min.js"></script>
<script src="${baseurl}/lib/layui/layui.js"></script>
<!-- 自定义js -->
<script src="${baseurl}/js/content.js"></script>
<script type="text/javascript" src="${baseurl}/lib/layui_custom/Hlayui.js"></script>
<script type="text/javascript">
    layui.use([ 'form', 'element', 'layer', 'jquery','layerCustom'], function () {
        var form = layui.form,
            element = layui.element,
            layer = layui.layer,
            layerCustom = layui.layerCustom,
            $ =layui.jquery;


        $(document).on('click','.chat-user',function(){
            var heId= $(this).attr('id');
            var myId= ${loginUser.id};
            $("#aheId").val(heId);
            $("#amyId").val(myId);
            $.ajax({
                url:BaseUrlPath+'/user/chat/list',
                type:'post',
                data:{'roomId':myId},
                dataType:"json",
                success:function(data){
                    $(".chat-message").remove();
                    if(data.code == 0 && data.count>0){
                        var i = data.count-1;
                        var d = data.data;
                        $("#newDate").text("最新消息时间："+d[i].createTime);

                        d.forEach(function(value, index){
                            var url = BaseUrlPath+'/images/a3.jpg';
                            if(value.avatar){
                                url = BaseUrlPath+value.avatar;
                            }
                            var html = '';
                            html += '<div class="chat-message">';
                            html += '<img class="message-avatar" src="'+url+'" alt="">';
                            html += '<div class="message">';
                            html += '<a class="message-author" href="#"> '+value.userName+' </a>';
                            html += '<span class="message-date"> '+value.createTime+'</span>';
                            html += '<span class="message-content">'+value.contentMsg;
                            html += '</span>';
                            html += '</div>';
                            html += '</div>';
                            $("#chat-discussion").append(html);

                            layui.use('element', function() {
                                var element = layui.element;
                                element.init();
                            });

                        });


                    }
                },
                error:function(data){
                }
            });
        });

        $(document).on('click','#message',function(){
            var h = $("#aheId").val();
            if(!h){
                layerCustom.redCryMsg('请选择客服对话');
                return;
            }

        });

        form.on('submit(add)', function(data){
            var myId= ${loginUser.id};
            var message = $("#message").val();
            var h = $("#aheId").val();
            layer.load();
            $.ajax({
                url:BaseUrlPath+'/user/chat/add',
                type:'post',
                data:{'userId':myId,'contentMsg':message,'roomId':myId},
                dataType:"json",
                success:function(res){
                    layer.close(1);
                  if(res.success){
                    var d = res.data;
                      $(".chat-message").remove();
                      d.forEach(function(value, index){
                          var url = BaseUrlPath+'/images/a5.jpg';
                          if(value.avatar){
                              url = BaseUrlPath+value.avatar;
                          }
                          var html = '';
                          html += '<div class="chat-message">';
                          html += '<img class="message-avatar" src="'+url+'" alt="">';
                          html += '<div class="message">';
                          html += '<a class="message-author" href="#"> '+value.userName+' </a>';
                          html += '<span class="message-date"> '+value.createTime+'</span>';
                          html += '<span class="message-content">'+value.contentMsg;
                          html += '</span>';
                          html += '</div>';
                          html += '</div>';
                          $("#chat-discussion").append(html);

                          layui.use('element', function() {
                              var element = layui.element;
                              element.init();
                          });

                      });
                  }

                },
                error:function(data){
                    layer.close(1);
                }
            })

        });
    })

</script>
</body>

</html>
